import React, { Component } from "react";
import { Modal, Toast } from "antd-mobile";
import CryptographicNumberInput from "./CryptographicNumberInput";
import "./PaypwdVerify.scss";
import XHFConfig from "../../../config/XHFConfig";
import yhTools from "../../../tools/yh";

export default class PaypwdVerify extends Component {
	constructor(props) {
		super(props);
		this.state = {
			/** 再次输入 */
			repPassword: "",
			/** 再次是否输入完整 */
			isRepPasswordComplete: false,
			/**支付密码 */
			password: "",
			/** 支付密码是否输入完整 */
			isPayPasswordComplete: false
		};

		this.pwdref = React.createRef();
		this.cpwdref = React.createRef();
		/** 是否提交过 */
		this._isSubmit = false;
	}

	/** 提交 */
	submit() {
		if (this._isSubmit) return;
		this._isSubmit = true;
		let { password, repPassword } = this.state;
		if (!this.state.isPayPasswordComplete) {
			return Toast.info("请输入交易密码", 2);
		}
		if (!this.state.isRepPasswordComplete) {
			return Toast.info("请再次输入密码", 2);
		}
		let objs = {
			url: XHFConfig.xhbSetPassword,
			params: {
				password,
				repPassword
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 15);
		yhTools.request(objs).then(res => {
			this._isSubmit = false;
			Toast.hide();
			if (res.code == "0") {
				Toast.info("密码设置成功", 2);
				this.props.onSuccess && this.props.onSuccess();
			} else {
				Toast.info(res.message, 2);
				this.setState({
					password: "",
					repPassword: "",
					isPayPasswordComplete: false,
					isRepPasswordComplete: false
				});
				this.pwdref.current.reset();
				this.cpwdref.current.reset();
			}
		});
	}

	onChangePwd(isPayPasswordComplete) {
		this.setState({ isPayPasswordComplete }, () => {
			isPayPasswordComplete &&
				this.pwdref.current.Keyboard &&
				this.pwdref.current.Keyboard.close();
			if (this.cpwdref.current && isPayPasswordComplete) {
				// 获取焦点进行输入
				this.cpwdref.current.inputRef.current.focus();
			}
		});
	}

	render() {
		let {
			visible = false,
			onClose,
			className = "",
			subName = "确定"
		} = this.props;
		let { isRepPasswordComplete, isPayPasswordComplete } = this.state;
		let isSubmit = isPayPasswordComplete && isRepPasswordComplete;
		return (
			<Modal
				className={`xhbPayModal ${className}`}
				title={isPayPasswordComplete ? "请再次确认交易密码" : "设置交易密码"}
				visible={visible}
				transparent
				closable
				maskClosable={false}
				onClose={onClose}
			>
				<div className="XhbPayModal-form">
					<div
						style={{
							display: isPayPasswordComplete ? "none" : "block",
							margin: "0.64rem 0"
						}}
					>
						<CryptographicNumberInput
							ref={this.pwdref}
							onChange={isPayPasswordComplete =>
								this.onChangePwd(isPayPasswordComplete)
							}
							isNormal={true}
							onComplete={password => this.setState({ password })}
						/>
					</div>
					<div
						style={{
							display: isPayPasswordComplete ? "block" : "none",
							margin: "0.64rem 0"
						}}
					>
						<CryptographicNumberInput
							ref={this.cpwdref}
							onChange={isRepPasswordComplete =>
								this.setState({ isRepPasswordComplete })
							}
							isNormal={true}
							onComplete={repPassword => this.setState({ repPassword })}
						/>
					</div>
					{isSubmit ? (
						<div
							className="btn"
							style={{ marginBottom: "1rem" }}
							onClick={() => {
								this.submit();
							}}
						>
							{subName}
						</div>
					) : (
						<div
							className="btn"
							style={{ opacity: isSubmit ? 1 : 0.15, marginBottom: "1rem" }}
						>
							{subName}
						</div>
					)}
				</div>
			</Modal>
		);
	}
}
